<template>
  <div class="login-index">
    <van-nav-bar title="登录" left-text="返回" left-arrow  @click-left="$router.go(-1)"/>
    <div class="mt-20">
      <!-- 手机号码 -->
      <div class="handset flex jc-sb pb-5">
        <input
          v-model="phone"
          class="f14"
          type="text" 
          placeholder="请输入手机号"
          click-left="$router.go(-1)"
        />
        <input class="f12 bg-fff" type="button" :value="text" @click="getCode"/>
      </div>
      <!-- 验证码 -->
      <div class="handset flex jc-sb mt-20 pb-5">
        <input v-model="smsCode" class="f14" placeholder="请输入验证码" />
      </div>

      <!-- 登录 -->
      <div class="mt-30">
        <van-button style="width: 80%" type="danger" @click="login">短信登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import $http from '@/utils/http'
export default {
  data() {
    return {
      phone: '13800000000',
      smsCode: '',
      // 倒计时健
      count: 10,
      // 按钮的文字
      text: '获取验证码',
      // 是否正在倒计时
      counting: false
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      if(this.counting) {
        // 正在倒计时的时候, 不往下执行
        return false;
      } 

      // 手机号码正则
      let phoneReg = /^1[3456789]\d{9}$/;
      // console.log(phoneReg.test(this.phone));
      // 检查输入的电话号码是否符合
      if (!phoneReg.test(this.phone)) {
          this.$toast('手机号码不正确,请重新输入');
          // 手机号码不正确时就不往下执行了
          return false;
      } 

      // 执行倒计时
      this.countDown();

      let data = {phone: this.phone}
      $http.post('/user/getSmsCode',data).then(res=> {
        console.log(res);
        this.smsCode = res.smsCode;
      })
    }, 

    // 倒计时
    countDown() {
      // 到时开始
      this.counting = true; 
       // 定时器进行倒计时
     let timer = setInterval(()=> {
        this.text = this.count--;
        // 当count的值为0时,按钮文字变成 重新获取验证码
        if (this.count === 0) {
          this.text = '重新获取验证';
          // 倒计时重置
          this.count = 10;
          // 清除倒计时
          clearInterval(timer); 
          // 倒计时结束
           this.counting = false;
        }
     },1000);
    }, 

    // 登录
    login() {
       // 手机号码正则
      let phoneReg = /^1[3456789]\d{9}$/;
      // console.log(phoneReg.test(this.phone));
      // 检查输入的电话号码是否符合
      if (!phoneReg.test(this.phone)) {
          this.$toast('手机号码不正确,请重新输入');
          // 手机号码不正确时就不往下执行了
          return false;
      }  
      // 检查验证码是否是空的
      if(!this.smsCode) {
         this.$toast('请输入验证码');
         return false;
      }


      let data = {
        phone: this.phone,
        smsCode: this.smsCode
      }
      $http.post('/user/login',data).then(res=> {
        // 把手机号码存入store, 修改phone状态
        this.$store.commit('set_phone',this.phone);
        // 把token存入store
        this.$store.commit('set_token',res.result.token);
        // 从哪里来回哪里去
        this.$router.go(-1); 
      })
    }
  }
}
</script>
 

<style lang="less">
@import "./index.less";
</style>

